<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>宿舍管理系统 - 注册</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .register-form {
            background: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
            width: 100%;
            max-width: 500px;
        }
        .form-floating {
            margin-bottom: 1rem;
        }
        .btn-register {
            width: 100%;
        }
        .error-message {
            color: #dc3545;
            margin-top: 0.5rem;
            font-size: 0.875rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="register-form">
                    <h2 class="text-center mb-4">学生注册</h2>
                    <form id="registerForm">
                        <!-- 基本信息 -->
                        <div class="form-floating mb-3">
                            <input type="text" class="form-control" id="studentId" placeholder="学号" required>
                            <label for="studentId">学号</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input type="text" class="form-control" id="name" placeholder="姓名" required>
                            <label for="name">姓名</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input type="email" class="form-control" id="email" placeholder="邮箱" required>
                            <label for="email">邮箱</label>
                        </div>

                        <!-- 个人信息 -->
                        <div class="form-floating mb-3">
                            <select class="form-select" id="gender" required>
                                <option value="">请选择性别</option>
                                <option value="male">男</option>
                                <option value="female">女</option>
                            </select>
                            <label for="gender">性别</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input type="text" class="form-control" id="major" placeholder="专业">
                            <label for="major">专业（选填）</label>
                        </div>

                        <!-- 密码信息 -->
                        <div class="form-floating mb-3">
                            <input type="password" class="form-control" id="password" placeholder="密码" required>
                            <label for="password">密码</label>
                            <div class="form-text">密码长度至少6位</div>
                        </div>
                        <div class="form-floating mb-4">
                            <input type="password" class="form-control" id="confirmPassword" placeholder="确认密码" required>
                            <label for="confirmPassword">确认密码</label>
                        </div>

                        <!-- 按钮组 -->
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary btn-register">注册</button>
                            <a href="/static/index.html" class="btn btn-outline-secondary">返回登录</a>
                        </div>
                        <div id="errorMessage" class="error-message text-center mt-3"></div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('registerForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const errorMessageElement = document.getElementById('errorMessage');
            errorMessageElement.textContent = '';
            
            // 验证密码
            const password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            
            if (password !== confirmPassword) {
                errorMessageElement.textContent = '两次输入的密码不一致';
                return;
            }
            
            if (password.length < 6) {
                errorMessageElement.textContent = '密码长度必须至少为6位';
                return;
            }

            // 验证必填字段
            const studentId = document.getElementById('studentId').value.trim();
            const name = document.getElementById('name').value.trim();
            const email = document.getElementById('email').value.trim();
            const gender = document.getElementById('gender').value;
            const major = document.getElementById('major').value.trim();

            if (!studentId) {
                errorMessageElement.textContent = '请输入学号';
                return;
            }
            if (!name) {
                errorMessageElement.textContent = '请输入姓名';
                return;
            }
            if (!email) {
                errorMessageElement.textContent = '请输入邮箱';
                return;
            }
            if (!gender) {
                errorMessageElement.textContent = '请选择性别';
                return;
            }
            
            // 构建注册数据
            const formData = {
                student_id: studentId,
                name: name,
                email: email,
                gender: gender,
                major: major || null,
                password: password
            };
            
            try {
                console.log('发送注册请求，数据：', JSON.stringify(formData, null, 2));
                
                const response = await fetch('/students/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(formData)
                });
                
                console.log('收到响应，状态码：', response.status);
                
                const responseText = await response.text();
                console.log('响应内容：', responseText);
                
                if (response.ok) {
                    alert('注册成功！请返回登录页面进行登录。');
                    window.location.href = '/static/index.html';
                    return;
                }
                
                // 尝试解析错误信息
                try {
                    const data = JSON.parse(responseText);
                    if (typeof data === 'string') {
                        errorMessageElement.textContent = data;
                    } else if (typeof data === 'object') {
                        errorMessageElement.textContent = data.detail || data.message || JSON.stringify(data);
                    } else {
                        errorMessageElement.textContent = '注册失败，请稍后重试';
                    }
                } catch (e) {
                    // 如果不是JSON，直接显示文本
                    errorMessageElement.textContent = responseText || '注册失败，请稍后重试';
                }
            } catch (error) {
                console.error('请求失败：', error);
                errorMessageElement.textContent = '网络错误，请检查网络连接后重试';
            }
        });
    </script>
</body>
</html> 